import { addTags, deleteTags, getTags, updateTags, uploadTags } from '@/api/exam/tags';
import CommonTable from '@/components/Table';
import React, { useRef, useState } from 'react';
import SearchBar from './Search';
import { Tag } from 'antd';
import { TagsItem } from '@/api/tags';
import { ColumnType } from 'antd/es/table';
import AddForm from './AddForm';
import EditForm from './EditForm';

const defaultColumn: ColumnType<TagsItem>[] = [
  {
    title: '标签名称',
    key: 'tagName',
    dataIndex: 'tagName',
    render: text => <Tag>{text}</Tag> 
  }
];

export default function TagsManagement() {
  const [tagsData, setTagsData] = useState<TagsItem[]>([])
  const [recorde, setRecord] = useState<TagsItem>()
  const formRef = useRef()
  const handleChange = (data: TagsItem[]) => setTagsData(data);
  const handleRecordChange = (data: TagsItem, form: any) => {
    setRecord(data)
    formRef.current = form
  }
  return (
    <>
      <CommonTable
        title="标签"
        deleteApi={deleteTags}
        getDataApi={getTags}
        updateDataApi={updateTags}
        uploadApi={uploadTags}
        addDataApi={addTags}
        columns={defaultColumn}
        onChange={handleChange}
        onRecordChange={handleRecordChange}
        AddForm={<AddForm data={tagsData} />}
        EditForm={<EditForm data={recorde} form={formRef.current}  />}
        SerchBar={<SearchBar />}
      />
    </>
  );
}
